<template>
  <div class='comment-action'>
    <div @click="$emit('onShowPost')">
      <button class="comment" ><van-icon name="edit" />你想说点什么...</button>
    </div>
    <div>
      <van-icon v-if="commentTotal!=0" name="chat-o" dot @click="onClickComment"/>
      <van-icon v-else name="chat-o"  @click="onClickComment"/>
    </div>
     <div>
      <van-icon v-if="star" name="star-o" @click="onClickStar"/>
      <van-icon v-else name="star"  @click="onClickStar"/>
     </div>
     <div>
       <van-icon v-if="like" name="good-job-o" @click="onClickLike"/>
       <van-icon v-else name="good-job"  @click="onClickLike"/>
     </div>
      <van-icon name="share-o" @click="onClickShare"/>
   </div>
</template>

<script>
import { addArticleLikings,deleteArticleLikings,addArticleCollections,deleteArticleCollections,getArticleLikingsId,getArticleCollectionsId} from '@/api/article'
import {mapGetters} from 'vuex'
import bus from '@/utils/bus'
export default {
  name: 'CommentAction',
  components: {},
  props: {
    articleId: {
      type: [Number, String],
      // required: true
    }
  },
  data () {
    return {
      commentTotal: 0,
      like: true,
      star: true
    }
  },
  computed:{
    ...mapGetters(['token'])
  },
  created () {
    this.getArticleLikingsId(this.articleId)
    this.getArticleCollectionsId(this.articleId)
  },
  methods: {
    async getArticleCollectionsId(id){
      if(!this.token) return console.log('去登录');
      const res = await getArticleCollectionsId(id)
      if(res){
        // console.log('当前状态已收藏');
        this.star = false
      }else{
        // console.log('当前状态未收藏');
        this.star = true
      }

    },
    // 查看当前文章是否已点赞
    async getArticleLikingsId(id){
      if(!this.token) return console.log('去登录');
      const res = await getArticleLikingsId(id)
      if(res){
        // console.log('当前状态已点赞');
        this.like = false
      }else{
        // console.log('当前状态未点赞');
        this.like = true
      }
    },
    // 点击评论按钮，跳转到评论喵点
    onClickComment () {
      if (!this.$route.hash) {
        this.$router.push('#comment')
        bus.$emit('onClickComment')
      }
    },
    // 收藏或取消收藏
    async onClickStar () {
      if(!this.token) return console.log('去登录');

      if(this.star){
      const res = await addArticleCollections({article_id:this.articleId})
      if(!res) return console.log('已经收藏过文章了，发请求取消收藏文章');
      // console.log('收藏文章成功');
      this.star = false
      }else{
        const re = await deleteArticleCollections(this.articleId)
        if(!re) return console.log("取消收藏文章失败");
        // console.log('取消收藏文章成功');
        this.star = true
      }
    },
    // 点赞或取消点赞
    async onClickLike () {
      if(!this.token) return console.log('去登录');
      if(this.like){
        const res = await addArticleLikings({article_id:this.articleId})
        if(!res)return console.log("已经点赞过文章了，发请求取消点赞文章");
        // console.log('点赞文章成功');
         this.like = false
      }else{
        const re = await deleteArticleLikings(this.articleId)
        if(!re) return console.log("取消点赞文章失败");
        // console.log('取消点赞文章成功');
        this.like = true
        }
    },
    onClickShare () {
      // this.$toast('点击分享')
      bus.$emit('onClickShare')
    }
  }
}
</script>
<style lang="scss" scoped>
.comment-action{
  position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid rgb(245, 245, 245);
  justify-content: space-around;
  align-items: center;
  // line-height: 50px;
  box-sizing: border-box;
  background-color: #fff;
  bottom: 0;
  .comment{
    font-size: 12px;
    // border-radius:1px solid #ccc;
    padding: 0 19px;
    // margin: 5 15px;
    border:none;
    height: 30px;
    border-radius: 50px;
  }
  .van-icon-star,.van-icon-good-job{
    color: rgb(114, 138, 233);
  }
}
</style>
